<template>
  <!-- 控制按钮显示不同样式 -->
  <button
    @click="handleClick"
    :class="[
      'm-button',
      type ? 'm-button-' + type : '',
      size ? 'm-button-size-' + size : '',
      block ? 'm-button-block' : ''
    ]"
    :disabled="disabled"
  >
    <!-- 按钮显示内容 -->
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script lang="ts">
export default {
  name: 'm-button',
  // 按钮选型接收参数
  props: {
    // 控制按钮主题
    type: {
      type: String,
      default: undefined,
      validator: (value: string) =>
        ['success', 'primary', 'warning', 'danger'].includes(value)
    },
    size: {
      // 控制按钮尺寸，默认md  middle 中等
      type: String,
      default: undefined,
      validator: (value: string) => ['lg', 'sm', 'md'].includes(value)
    },
    disabled: Boolean, // 禁用
    block: Boolean, // 块级按钮，display: block; 独占整行
    loading: Boolean // loading  暂时没写
  },

  setup(props: any, { emit, slots }: { emit: any; slots: any }) {
    const $slots = slots.default()[0].children
    if ($slots.length === 2) {
      slots.default()[0].children = $slots[0] + '  ' + $slots[1]
    }
    // 1.子组件发射事件
    const handleClick = (event: any) => {
      if (!props.disabled) {
        emit('onClick', event)
      } else {
        return
      }
    }

    return {
      handleClick
    }
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
